<template>
  <div class="add-order">
    <el-dialog
      v-model="showDialog"
      :title="`修改积分`"
      width="500px"
      :before-close="cancel"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm.formData"
        :rules="rules"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="积分数量"
          prop="amount"
        >
          <el-input-number
            v-model="ruleForm.formData.amount"
            :min="1"
            controls-position="right"
            placeholder="请输入积分数量"
          />
        </el-form-item>
        <el-form-item
          label="积分设置"
          prop="type"
        >
          <el-select
            v-model="ruleForm.formData.type"
            class="m-2"
            placeholder="请选择积分类型"
          >
            <el-option
              v-for="item in setTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="积分类型"
          prop="currencyId"
        >
          <el-select
            v-model="ruleForm.formData.currencyId"
            class="m-2"
            placeholder="请选择积分类型"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          v-if="ruleForm.formData.type === 0"
          label="备注"
          prop="remark"
        >
          <el-select v-model="ruleForm.formData.remark">
            <el-option
              label="系统退还"
              value="系统退还"
            />
            <el-option
              label="系统发放"
              value="系统发放"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button
            type="primary"
            :loading="loading"
            @click="submitForm(ruleFormRef)"
          >确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import CustomerApi from "@/api/customerApi";
import marketingCenterApi from "@/api/marketingCenterApi";
import type { FormInstance, FormRules } from "element-plus";
const props = defineProps({
  showDialog: Boolean,
  modelData: {
    type: Object,
    default: {},
  },
});
const { modelData, showDialog } = toRefs(props);
const loading = ref(false);
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  formData: {
    amount: 1,
    currencyId: "",
    remark: "",
    type: 0,
    userId: "",
    name: ''
  },
});

const typeList: any = ref([])
const setTypeList: any = ref([
  {name: '增加', id: 0},
  {name: '减少', id: 1},
  {name: '消耗', id: 2},
])
const rules = reactive<FormRules>({
  amount: [{ required: true, message: "请输入积分数量", trigger: ["blur"] }],
  currencyId: [{ required: true, message: "请选择积分类型", trigger: ["blur"] }],
  remark: [{required: true, message: "请选择备注", trigger: ["change"]}]
});
watch(
  () => showDialog.value,
  (val) => {
    console.log('[ modelData ]', modelData.value)
    ruleForm.formData.userId = modelData.value.id
    ruleForm.formData.name = modelData.value.nickName
    getCurrencyPager()
  }
);


const getCurrencyPager = async() => {
  let params = {
    currentPage: 1,
    showCount: -1,
    status: 1,
  }
  let rs:any = await marketingCenterApi.currencyPager(params)
  if (rs.code === 200) {
    typeList.value = rs.payload
  }

}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      updateIntegral();
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 设置积分
const updateIntegral = async () => {
  loading.value = true;
  let rs: any = await CustomerApi.updateIntegral(ruleForm.formData);

  if (rs.code === 200) {
    ElMessage({
      message: `修改积分成功`,
      type: "success",
    });
    confirm();
  }
  loading.value = false;
};
const confirm = () => {
  emit("confirm");
  cancel();
};

const cancel = () => {
  ruleForm.formData = {
    amount: 1,
    currencyId: "",
    remark: "",
    type: 0,
    userId: "",
    name: ''
  };
  setTimeout(() => {
    ruleFormRef.value?.resetFields();
  }, 0);
  emit("cancel", "addIntegralDialog");
};
const emit = defineEmits(["confirm", "cancel"]);
</script>

<style lang="scss" scoped></style>
